<html>
    <head>
        <title>显示数组过滤排序后的结构</title>
    </head>
    <body>
        <script>
            // ★五、 显示 过滤/排序 后的结果
                                /*
                                    有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。
                                    在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
                                */
                                             /*
                                                eg:
                                                    <li v-for="n in eventNumbers">{{n}}</li>
                                             */
                                                data:{
                                                    numbers:[1,2,3,4,5]
                                                },
                                                computed:{
                                                    eventNumbers:function(){
                                                        return this.numbers.filters((number)=>{
                                                            return number %2 ===0
                                                        })
                                                    }
                                                }

                                /*
                                    在计算属性不合适的情况下(例如，在嵌套 v-for 循环中)你可以使用一个方法：
                                */
                                                /*
                                                    eg:
                                                       <ul v-for="set in sets">
                                                           <li v-for="n in even(set)">{{ n}}</li>
                                                       </ul>
                                                */
                                                    data:{
                                                        sets:[[1,2,3,4,5],[6,7,8,9,10]]
                                                    },
                                                    method:{
                                                        even:function(numbers){
                                                            return numbers.filters((number)=>{
                                                                return number %2 ===0
                                                            })
                                                        }
                                                    }
        </script>
    </body>
</html>